<script lang="ts" setup>
import type { StoreType } from "../composables/useStoreTypeManagement"

interface Props {
  modelValue: boolean
  storeType?: StoreType | null
}

const props = withDefaults(defineProps<Props>(), {
  storeType: null
})

const emit = defineEmits<{
  "update:modelValue": [value: boolean]
  "confirm": [data: { name: string }]
  "close": []
}>()

// 表单数据
const formData = ref({
  name: ""
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: "请输入类型名称", trigger: "blur" },
    { min: 2, max: 20, message: "类型名称长度在 2 到 20 个字符", trigger: "blur" }
  ]
}

const formRef = ref()

// 计算是否为编辑模式
const isEditMode = computed(() => !!props.storeType)

// 弹窗标题
const dialogTitle = computed(() => isEditMode.value ? "编辑店铺类型" : "新增店铺类型")

// 提交按钮文字
const submitButtonText = computed(() => isEditMode.value ? "更新" : "创建")

// 弹窗显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => {
    emit("update:modelValue", value)
  }
})

// 监听弹窗打开，初始化表单数据
watch(
  () => props.modelValue,
  (visible: boolean) => {
    if (visible) {
      initForm()
    }
  }
)

// 监听编辑数据变化
watch(
  () => props.storeType,
  () => {
    if (props.modelValue) {
      initForm()
    }
  }
)

// 初始化表单
function initForm() {
  if (isEditMode.value && props.storeType) {
    formData.value = {
      name: props.storeType.name
    }
  } else {
    formData.value = {
      name: ""
    }
  }

  // 清除验证状态
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

// 处理确认
function handleConfirm() {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      emit("confirm", { ...formData.value })
    }
  })
}

// 处理取消
function handleCancel() {
  dialogVisible.value = false
  emit("close")
}

// 处理关闭后事件
function handleClosed() {
  // 重置表单
  formData.value = {
    name: ""
  }
  formRef.value?.resetFields()
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="500px"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    @closed="handleClosed"
  >
    <div class="dialog-content">
      <div class="dialog-description">
        {{ isEditMode ? '修改店铺类型信息' : '创建新的行业类型，用于为账号人设提供分类。' }}
      </div>

      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="80px"
        class="store-type-form"
      >
        <el-form-item label="类型名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="如：餐饮美食、零售商店、美容美发"
            maxlength="20"
            show-word-limit
            clearable
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          class="submit-btn"
        >
          {{ submitButtonText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-content {
  .dialog-description {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
  }

  .store-type-form {
    .el-form-item {
      margin-bottom: 20px;

      :deep(.el-form-item__label) {
        color: #374151;
        font-weight: 500;
      }

      :deep(.el-input) {
        .el-input__wrapper {
          border-radius: 6px;
          border: 1px solid #e5e7eb;

          &:hover {
            border-color: #d1d5db;
          }

          &.is-focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
          }
        }

        .el-input__inner {
          font-size: 14px;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .el-button {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 6px;
    font-weight: 500;

    &.submit-btn {
      background-color: #1f2937;
      border-color: #1f2937;

      &:hover {
        background-color: #111827;
        border-color: #111827;
      }
    }
  }
}

// 覆盖dialog默认样式
:deep(.el-dialog) {
  border-radius: 12px;

  .el-dialog__header {
    padding: 24px 24px 0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;

      .el-dialog__close {
        color: #6b7280;
        font-size: 16px;

        &:hover {
          color: #374151;
        }
      }
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .el-dialog__footer {
    padding: 0 24px 24px;
  }
}
</style>
